<template>
	<div class="layout-header topbar" style="padding: 0px; width: 100%;" v-if="header.open">
		<sui-menu style="background-color:white;">
			<!-- 使菜单居中 -->
			<div class="ui container">
				<div class="left menu">
					<a is="sui-menu-item" class="header-logo" href="https://github.com/" aria-label="Homepage" data-ga-click="(Logged out) Header, go to homepage, icon:logo-wordmark">
						<svg height="38" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="38" aria-hidden="true">
							<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
						</svg>
					</a>
				</div>
				<div class="right menu">
					<a is="sui-menu-item" @click="$router.push('/')">
						Sign in 
					</a>
				</div>
			</div>
		</sui-menu>
	</div>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import router from "@/mixins/router";
export default {
  name: "zui-sign-up-header",
  mixins: [router],
  data() {
    return {
      baseUrl: process.env.BASE_URL
    };
  },
  computed: {
    ...mapGetters(["header", "search"]),
    current: {
      get() {
        return this.$store.state.app.header.current;
      },
      set(value) {
        this.$store.dispatch("set_header_menu", {
          key: "current",
          value: value
        });
      }
    }
  },
  methods: {
    ...mapActions(["toggleSidebar", "selectHeaderMenu", "toggleSearchModal"]),
    pushHistory() {
      var state = {
        title: "搜索栏搜索",
        url: "#"
      };
      window.history.pushState(state, "搜索栏搜索", "#");
    },
    modalToggle() {
      if (window.screen.width <= 768) {
        if (this.search.modal.open == false) {
          this.pushHistory();
        } else {
          window.history.back();
        }
        this.toggleSearchModal();
      }
    }
  }
};
</script>

<style lang="less" scoped>
@tablet: 992px;
@mobile: 768px;
.layout-header {
  background: #ffffff;
  padding: 0 50px;
  line-height: 64px;
}
.topbar {
  backface-visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}
.ui.menu:not(.vertical) > .ui.container {
  & > .item.i-mobile {
    padding: 1.25em 1.4em;
    display: flex;
    @media (min-width: @mobile) {
      display: none;
    }
  }
  & > .left.menu {
    display: flex;
  }
  .right.menu {
    & /deep/ .i-search-menu {
      @media (max-width: @mobile) {
        padding-right: 1px;
        padding-left: 0px;
      }
    }
    & > .item.i-mobile {
      padding: 0;
      margin: 0;
      display: none;
      height: 35px;
      align-self: center;
      @media (min-width: @mobile) {
        display: flex;
      }
      &:focus {
        box-shadow: 0 0 0 2px #ffffff, 0 0 2px 4px rgba(152, 28, 235, 0.4);
      }
      & /deep/ .null.icon {
        display: none;
      }
      & /deep/ img {
        margin: 0;
        padding: 0;
      }
    }
    & > .item.i-tablet {
      padding: 1.25em 1.4em;
      display: none;
      @media (max-width: @mobile) {
        display: flex;
      }
      &:hover {
        background: none;
      }
      & /deep/ .icon {
        color: black;
      }
    }
  }
}
.ui.search.selection.dropdown {
  & /deep/ .search.icon {
    margin: -0.98571429em;
  }
}
.ui.dimmer.modals.page {
  & /deep/ .ui.standart.modal.transition {
    @media (max-width: @mobile) {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
